<template>
    <div class="ranking">
        <van-nav-bar
        title="投喂榜"
        left-arrow
        @click-left="onClickLeft"
        />
        <div class="cont">
            <div class="img">
                <img :src="img" alt="">
                <div class="imgText">
                    <div class="name">{{title}}</div>
                    <div>暂不展示排行榜</div>
                </div>
            </div>
            <van-tabs v-model="active" color="#684c31" @click="onClick">
            <van-tab title="周榜"><rank :item="week" :user="all" :mount="mounth"/></van-tab>
            <van-tab title="月榜"><rank :item="week" :user="all" :mount="mounth"/></van-tab>
            <van-tab title="总榜"><rank :item="week" :user="all" :mount="mounth"/></van-tab>
            </van-tabs>

        </div>
    </div>
</template>

<script>
    import rank from '@/components/rankingCont.vue'
    export default {
        name:'ranking',
        data() {
            return {
            active: 0,

            id:'',
            title:'',
            img:'',
            number:0,
            
            IsLongding: false,
            // 周榜
            week:{},
            // 月榜
            mounth:'粉丝值',
            // 总榜
            all:[]
            };
        },
        components:{
            rank,
        },
        created(){
            this.id = this.$route.query.id;
            this.img = this.$route.query.img;
            this.title = this.$route.query.title;

            this.getWeek(this.$route.query.id)

        },
        methods: {
            onClick() {
                this.getWeek(this.id)
            },
            getWeek(id){
                this.all = []
                if(this.active === 0){
                    this.number =2;
                }else if(this.active === 1){
                    this.number =1
                }else{
                    this.number = 3
                }
                this.axios({
                    methods:'GET',
                    url:'GetRewardRank',
                    params:{
                        comicId:id,
                        rankType:this.number,
                        type:0
                    }
                }).then(result=>{
                    this.IsLongding = true;
                    this.week = result.data.data;
                    for(let i = 0;i <result.data.data.users.length;i++){
                        if(i >= 3){
                            return;
                        }
                        this.all.push(result.data.data.users[i])
                    }
                })
            },
            onClickLeft() {
                this.$router.go(-1);
            },
        },
    }
</script>

<style lang="less" scoped>
    /deep/.van-hairline--bottom::after{
        border: none;
    }
    /deep/.van-nav-bar{
        background-color: #fbedd7;
        .van-icon{
            color: #684c31;
            font-weight: 700;
        }
        .van-nav-bar__title{
            color: #684c31;
            font-weight: 700;
        }
    }
    /deep/.van-tabs__line{
        width: 10px;
    }
    /deep/.van-tab{
        font-weight: 700;
    }
    .van-tab__pane{
        min-height: 447px;
        background-color: white;
        padding: 10px;
        box-sizing: border-box;
    }

    .ranking{
        background-color: #fbedd7;
        .cont{
            padding: 10px;
            box-sizing: border-box;
            width: 100%;
            height: calc(100vh - 46px);
            .img{
                width: 100%;
                height: 100px;
                display: flex;
                margin-bottom: 20px;
                img{
                    height: 100%;
                    display:block;
                }
                .imgText{
                    margin-left: 10px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
            }
        }
    }
</style>